<!-- <template lang="">
    <main>
        <b-card-list :cardRecords="cardRecords  "></b-card-list>
        <pagination :total="100"/>
    </main>
</template>
<script>
    import {
        watchEffect
    } from "vue";
    import http from "@u/http";
    import BCardList from "@b/card-list.vue";
    import {
        blogViewConfig
    } from "@vp/show/blog.js";
    import Pagination from '@c/pagination.vue';

    export default {
        components: {
            BCardList,
            Pagination
        },
        setup() {

            const {
                cardRecords,
                limit,
                total
            } = blogViewConfig;

            watchEffect(async() => {
                try {
                    const res = await http.get(`/articles?type=blog&limit=${limit.value}`);
                    cardRecords.value = res.data.rows;
                    total.value = res.data.count;
                } catch (error) {

                }
            })
            return {
                cardRecords,
                limit,
                total

            }
        }
    }
</script>
<style scoped>

</style> -->
<template>
    <main>
      <b-card-list :cardRecords="cardRecords" @handler="handler"></b-card-list>
      <c-pagination :total="total" :defaultPageSize="limit" />
    </main>
  </template>

<script>
    import BCardList from "@b/card-list.vue";
    import CPagination from "@c/pagination.vue";
    import {
        bookViewConfig
    } from "@vp/show/book.js";
    import http from "@u/http";
    import {
        watchEffect
    } from "vue";
    import {
        useLinkedRouterParam
    } from "@u/route";
    import {
        useInfoNotice
    } from "@u/notice";
    import {
        useRoutePathToPage
    } from "@u/router";

    export default {
        components: {
            BCardList,
            CPagination,
        },
        setup() {
            const {
                cardRecords,
                limit,
                total
            } = bookViewConfig;

            const pageNum = useLinkedRouterParam("pageNum");
            watchEffect(
                async() => {
                    try {
                        const res = await http.get(
                            `/articles?type=book&limit=${limit.value}&page=${pageNum.value}`
                        );
                        cardRecords.value = res.data.rows;
                        total.value = res.data.count;
                    } catch (error) {
                        useInfoNotice({
                            message: "获取失败",
                            description: error.reason || error.data || "未知错误",
                        });
                    }
                }, {
                    //渲染之后做一次post请求
                    flush: "post",
                }
            );
            //接受子组件抛过来的handler  跳转到文章查询详情页 加id的那种
            const handler = (id) => {
                const toPage = useRoutePathToPage(`/details/${id}`);
                toPage();
            };

            return {
                cardRecords,
                total,
                limit,
                handler,
            };
        },
    };
</script>